<template>
  <div
    class="header-box"
    :style="{ background: 'url('+backgroundImg+')' }"
  >
    <div class="header-box__left">
      <img :src="logUrl">
    </div>
    <div class="header-box__middle">
      <public-website-menu
        v-if="!isShowSearch"
        @handle-menu="handleWebsiteMenu"
      />
      <div />
      <public-search
        v-if="isShowSearch"
        :recent-search-item="recentSearchItems"
        :popular-search-item="popularSearchItems"
        @handle-search-type-change="searchTypeChange"
        @remove-recent-search-items="removeRecentSearchItems"
        @handle-search="handleSearch"
      />
    </div>
    <div class="header-box__right">
      <lang-item @change-language="changeLang" />
      <public-top-menu
        v-if="isShowTopMenu"
        @menu-click="handleTopMenu"
      />
    </div>
  </div>
  <el-divider v-if="isShowDivider" />
</template>

<script setup>
import {defineComponent} from "vue";
import PublicSearch from './PublicSearch.vue'
import PublicWebsiteMenu from './PublicWebsiteMenu.vue'
import PublicTopMenu from './PublicTopMenu.vue'
import LangItem from '../common/LangItem.vue'
import logImg from '@/assets/images/ui/logo.png'

defineComponent({
  name: 'PublicHeader'
})
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  isShowSearch: {
    type: Boolean,
    default: false,
  },
  isShowTopMenu: {
    type: Boolean,
    default: true
  },
  isShowDivider: {
    type: Boolean,
    default: true,
  },
  logUrl: {
    type: String,
    default: logImg,
  },
  recentSearchItems: {
    type: Array,
    default: ()=>[],
  },
  popularSearchItems: {
    type: Array,
    default: ()=>[],
  },
  backgroundImg: {
    type: String,
    default: '',
  }
})

const emits = defineEmits(['handleSearchTypeChange','removeRecentSearchItems',
'handleSearch',"changeLanguage",'handleWebsiteMenu','handleTopMenu']);

const searchTypeChange = (value)=>{
  emits('handleSearchTypeChange',value);
}

const handleSearch = (value)=>{
  emits('handleSearch',value);
}
const removeRecentSearchItems = ()=>{
    emits('removeRecentSearchItems',{});
}

const changeLang = (item)=>{
  emits('changeLanguage',item);
}

const handleWebsiteMenu = (item)=>{
  emits('handleWebsiteMenu',item);
}

const handleTopMenu = (item)=>{
  emits('handleTopMenu',item);
}
</script>

<style scoped lang="scss">
.header-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 130px;
  background-size: contain;

  .header-box__left {
    img {
      margin-left: 75px;
      display: unset;
      max-width: unset;
    }
  }
  .header-box__middle {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
  }
  .header-box__right {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: end;
    height: 100%;
    margin-right: 65px;
  }
}

.el-divider {
  margin: 0;
}

</style>